<template>
  <div style="background-color:#f0f2f5;margin-top:-30px;">
    <div class="homepage-container">
      <div class="homepage-header">
        <p class="title">今日数据</p>
        <el-row :gutter="20" type="flex" justify="space-between">
          <el-col>
            <div class="header-list" style="background-color:#4e9fec">
              <div>
                <section class="titleimg">
                  <svg-icon class-name="icon" icon-class="dengluyonghu"/>
                </section>
                <section class="content">
                  <p class="subtitle">今日登录用户</p>
                  <p style="margin:0;color:#fff">
                    <span>{{ loginUser }}</span> 人次
                  </p>
                </section>
              </div>
              <p class="list-bottom">
                <span style="float:left;color:#fff;">登录人次</span>
                <span style="float:right;color:#fff;">{{ allLoginUser }}人次</span>
              </p>
            </div>
          </el-col>
          <!--          <el-col>-->
          <!--            <div class="header-list" style="background-color:#6bc57c">-->
          <!--              <div>-->
          <!--                <section class="titleimg">-->
          <!--                  <svg-icon class-name="icon" icon-class="xinzengzhuce"/>-->
          <!--                </section>-->
          <!--                <section class="content">-->
          <!--                  <p class="subtitle">新增注册</p>-->
          <!--                  <p style="margin:0;color:#fff">-->
          <!--                    <span>{{ newRegister }}</span>人-->
          <!--                  </p>-->
          <!--                </section>-->
          <!--              </div>-->
          <!--              <p class="list-bottom">-->
          <!--                <span style="float:left;color:#fff;">总数</span>-->
          <!--                <span style="float:right;color:#fff;">{{ allRegister }}人</span>-->
          <!--              </p>-->
          <!--            </div>-->
          <!--          </el-col>-->
          <!--          <el-col>-->
          <!--            <div class="header-list" style="background-color:#19aabf">-->
          <!--              <div>-->
          <!--                <section class="titleimg">-->
          <!--                  <svg-icon class-name="icon" icon-class="kechengxinzeng"/>-->
          <!--                </section>-->
          <!--                <section class="content">-->
          <!--                  <p class="subtitle">课程新增学员</p>-->
          <!--                  <p style="margin:0;color:#fff">-->
          <!--                    <span>{{ newStudent }}</span> 人-->
          <!--                  </p>-->
          <!--                </section>-->
          <!--              </div>-->
          <!--              <p class="list-bottom">-->
          <!--                <span style="float:left;color:#fff;">总人数</span>-->
          <!--                <span style="float:right;color:#fff;">{{ allStudent }}人</span>-->
          <!--              </p>-->
          <!--            </div>-->
          <!--          </el-col>-->
          <el-col>
            <div class="header-list" style="background-color:#8995ea">
              <div>
                <section class="titleimg">
                  <svg-icon class-name="icon" icon-class="xinzengxueyuan"/>
                </section>
                <section class="content">
                  <p class="subtitle">班级新增学员</p>
                  <p style="margin:0;color:#fff">
                    <span>{{ newClassStudent }}</span> 人
                  </p>
                </section>
              </div>
              <p class="list-bottom">
                <span style="float:left;color:#fff;">总人数</span>
                <span style="float:right;color:#fff;">{{ allClassStudent }}人</span>
              </p>
            </div>
          </el-col>
          <el-col>
            <div class="header-list" style="background-color:#ddbd65">
              <div>
                <section class="titleimg">
                  <svg-icon class-name="icon" icon-class="xinzenghuiyuan"/>
                </section>
                <section class="content">
                  <p class="subtitle">新增会员</p>
                  <p style="margin:0;color:#fff">
                    <span>{{ newMember }}</span> 人
                  </p>
                </section>
              </div>
              <p class="list-bottom">
                <span style="float:left;color:#fff;">总数</span>
                <span style="float:right;color:#fff;">{{ allMember }}人</span>
              </p>
            </div>
          </el-col>
          <!--          <el-col>-->
          <!--            <div class="header-list" style="background-color:#15b8ea">-->
          <!--              <div>-->
          <!--                <section class="titleimg">-->
          <!--                  <svg-icon class-name="icon" icon-class="weihuifu"/>-->
          <!--                </section>-->
          <!--                <section class="content">-->
          <!--                  <p class="subtitle">未回复回答</p>-->
          <!--                  <p style="margin:0;color:#fff">-->
          <!--                    <span>{{ noReply }}</span> 个-->
          <!--                  </p>-->
          <!--                </section>-->
          <!--              </div>-->
          <!--              <p class="list-bottom">-->
          <!--                <span style="float:left;color:#fff;">总数</span>-->
          <!--                <span style="float:right;color:#fff;">{{ allNoReply }}个</span>-->
          <!--              </p>-->
          <!--            </div>-->
          <!--          </el-col>-->
        </el-row>
      </div>
      <el-row :gutter="15" style="margin-top:20px;">
        <el-col :span="18">
          <div class="home-task">
            <el-row :gutter="1">
              <el-col :span="24">
                <div class="task-left">
                  <home-bar
                    id="home-bar"
                    :style="barStyle"
                    :bar-data="barStyleData"
                    :key="barDataKey"
                    class-name="bar"
                  />
                  <el-switch
                    :width="30"
                    v-model="barStyleTime"
                    active-color="#409EFF"
                    active-value="month"
                    active-text="月"
                    inactive-color="#409EFF"
                    inactive-value="week"
                    inactive-text="周"
                  />
                </div>
              </el-col>
              <!--              <el-col :span="10">-->
              <!--                <div class="task-right">-->
              <!--                  <section class="right-header">-->
              <!--                    <div style="float:left;">-->
              <!--                      <el-tabs v-model="homepageQuestion">-->
              <!--                        <el-tab-pane label="最新问答" name="1"/>-->
              <!--                        <el-tab-pane label="最新评价" name="2"/>-->
              <!--                      </el-tabs>-->
              <!--                    </div>-->
              <!--                    <div style="float:right;">-->
              <!--                      <span>-->
              <!--                        <el-button type="text" style="color:#9fa0a0;" @click="jumpMore">更多 》</el-button>-->
              <!--                      </span>-->
              <!--                    </div>-->
              <!--                  </section>-->
              <!--                  <eltable-->
              <!--                    :table-label="homepageQuestion === '1'? questionLabel : evaluateLabel"-->
              <!--                    :table-data="homepageQuestion === '1'? question : evaluate"-->
              <!--                  >-->
              <!--                    <el-table-column-->
              <!--                      slot="first"-->
              <!--                      :label="homepageQuestion === '1'? '问题' :'评论'"-->
              <!--                      min-width="50"-->
              <!--                      align="left"-->
              <!--                    >-->
              <!--                      <template slot-scope="scope">-->
              <!--                        <span-->
              <!--                          v-if="homepageQuestion === '1'"-->
              <!--                          style="vertical-align:middle"-->
              <!--                        >{{ scope.row.title }}</span>-->
              <!--                        <span-->
              <!--                          v-if="homepageQuestion === '2'"-->
              <!--                          style="vertical-align:middle"-->
              <!--                        >{{ scope.row.content }}</span>-->
              <!--                      </template>-->
              <!--                    </el-table-column>-->
              <!--                    <el-table-column slot="button" label="操作" min-width="30" align="center">-->
              <!--                      <template slot-scope="scope">-->
              <!--                        <el-button-->
              <!--                          v-if="homepageQuestion === '1'"-->
              <!--                          type="danger"-->
              <!--                          size="mini"-->
              <!--                          @click="remindTeacher(scope.row)"-->
              <!--                        >提醒-->
              <!--                        </el-button>-->
              <!--                        <el-button-->
              <!--                          v-if="homepageQuestion === '2'"-->
              <!--                          type="success"-->
              <!--                          size="mini"-->
              <!--                          @click="jumpEvaluate(scope.row)"-->
              <!--                        >查看-->
              <!--                        </el-button>-->
              <!--                      </template>-->
              <!--                    </el-table-column>-->
              <!--                  </eltable>-->
              <!--                </div>-->
              <!--              </el-col>-->
            </el-row>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home-subject">
            <section class="subject-header">
              <div style="float:left;">
                <el-tabs v-model="homepageCourse">
                  <el-tab-pane label="课程排行榜" name="1"/>
                  <el-tab-pane label="热门搜索" name="2"/>
                </el-tabs>
              </div>
              <div style="float:right;">
                <el-switch
                  :width="30"
                  v-model="time"
                  style="display: block;margin-top:10px;"
                  active-color="#409EFF"
                  active-value="month"
                  active-text="月"
                  inactive-color="#409EFF"
                  inactive-value="week"
                  inactive-text="周"
                  @change="getHomeSubject"
                />
              </div>
            </section>
            <eltable
              :table-label="homepageCourse === '1'? subjectLabel : searchLabel"
              :table-data="homepageCourse === '1'? subject : search"
            />
          </div>
        </el-col>
      </el-row>
      <el-dialog :visible.sync="dialog.view" title="公告查看" width="580px">
        <el-form>
          <el-form-item label-width="100px">
            <div class="home-notice-div" v-html="announcementContent">{{ announcementContent }}</div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog.view = false">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog :visible.sync="dialog.evaluateView" title="评价查看" width="580px">
        <el-form :model="evaluateData">
          <el-form-item label-width="100px" label="评价内容:">
            <div style="color:#3A3A3A">{{evaluateData.content}}</div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog.evaluateView = false">取 消</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import Eltable from './components/Hometable'
  // import HomeLine from './components/line'
  import HomeBar from './components/bar'
  // import HomePie from './components/pie'
  import {getCourseOrder, getDayData, getFinishTask, getFirstContent, getOrderData, getPayOrderData, getQuestionAndEvaluate, remindTeacher} from '@/api/homepage/homepage' // 数据接口
  import {getTenantId, getUserId} from '@/utils/auth'

  export default {
    name: 'Homepage',
    components: {
      Eltable,
      // HomeLine,
      HomeBar
      // HomePie
    },
    data() {
      return {
        lineStyle: {
          width: '100%',
          height: '550px'
        },
        barStyle: {
          width: '100%',
          height: '550px'
        },
        dialog: {
          view: false,
          evaluateView: false
        },
        notice: {
          content: ''
        },
        evaluateData: {
          content: ''
        },
        pieStyle: {
          width: '100%',
          height: '500px'
        },
        time: 'week',
        lineStyleTime: 'week',
        lineStyleData: {},
        lineDataKey: 0,
        pieStyleTime: 'week',
        pieStyleData: {},
        pieDataKey: 0,
        allPieDataCount: 0,
        barStyleTime: 'week',
        barStyleData: {},
        barDataKey: 0,
        homepageCourse: '1',
        homepageQuestion: '1',
        subjectLabel: [
          {
            label: '课程名',
            prop: 'courseName',
            width: '20',
            position: 'left'
          },
          {
            label: '新增学员',
            prop: 'newJoinStudent',
            width: '10',
            position: 'right'
          }
        ],
        searchLabel: [
          {
            label: '关键词',
            prop: 'text',
            width: '20',
            position: 'left'
          },
          {
            label: '搜索次数',
            prop: 'times',
            width: '10',
            position: 'right'
          }
        ],
        subject: [],
        search: [],
        questionLabel: [
          {
            label: '查看数',
            prop: 'hitNum',
            width: '20',
            position: 'center'
          }
        ],
        question: [],
        evaluateLabel: [
          {
            label: '评分',
            prop: 'rating',
            width: '10',
            position: 'center'
          }
        ],
        evaluate: [],
        loginUser: 0,
        allLoginUser: 0,
        newRegister: 0,
        allRegister: 0,
        newStudent: 0,
        allStudent: 0,
        newClassStudent: 0,
        allClassStudent: 0,
        newMember: 0,
        allMember: 0,
        noReply: 0,
        allNoReply: 0,
        announcementContent: '暂无内容'
      }
    },
    watch: {
      homepageQuestion(newForm, oldForm) {
        this.getHomeQuestion()
      },
      lineStyleTime(newForm, oldForm) {
        this.getOrderData()
      },
      pieStyleTime(newForm, oldForm) {
        this.getPayOrderData()
      },
      barStyleTime(newForm, oldForm) {
        this.getFinishTask()
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        getDayData(getTenantId()).then(res => {
          this.loginUser = res.data.result.loginUser ? res.data.result.loginUser : 0;
          this.allLoginUser = res.data.result.allLoginUser ? res.data.result.allLoginUser : 0;
          this.newRegister = res.data.result.newRegister ? res.data.result.newRegister : 0;
          this.allRegister = res.data.result.allRegister ? res.data.result.allRegister : 0;
          this.newStudent = res.data.result.newStudent ? res.data.result.newStudent : 0;
          this.allStudent = res.data.result.allStudent ? res.data.result.allStudent : 0;
          this.newClassStudent = res.data.result.newClassStudent ? res.data.result.newClassStudent : 0;
          this.allClassStudent = res.data.result.allClassStudent ? res.data.result.allClassStudent : 0;
          this.newMember = res.data.result.newMember ? res.data.result.newMember : 0;
          this.allMember = res.data.result.allMember ? res.data.result.allMember : 0;
          this.noReply = res.data.result.noReply ? res.data.result.noReply : 0;
          this.allNoReply = res.data.result.allNoReply ? res.data.result.allNoReply : 0
        });
        this.getHomeSubject();
        this.getHomeQuestion();
        this.getOrderData();
        this.getPayOrderData();
        this.getFinishTask();
        this.getAnnouncementContent()
      },
      getHomeSubject() {
        getCourseOrder(this.time, getTenantId()).then(res => {
          this.subject = res.data.subject;
          this.search = res.data.search
        })
      },
      getHomeQuestion() {
        getQuestionAndEvaluate(getTenantId()).then(res => {
          this.question = res.data.question;
          this.evaluate = res.data.evaluate
        })
      },
      jumpMore() {
        if (this.homepageQuestion === '1') {
          this.$router.push('/subject/question')
        } else if (this.homepageQuestion === '2') {
          this.$router.push('/subject/evaluation')
        }
      },
      jumpNoticeInfo() {
        // this.$router.push('/subject/noticeInfo')
        this.$router.push('/operate/webnotice')
      },
      remindTeacher(row) {
        const params = {};
        params.sendId = getUserId();
        params.tenantId = getTenantId();
        params.receiveId = row.teacherId;
        params.content = '请尽快对问题' + row.title + '进行回答';
        remindTeacher(params).then(res => {
          this.$notify({
            title: '成功',
            message: '提醒教师的通知，发送成功！',
            type: 'success',
            duration: 2000
          })
        })
      },
      jumpEvaluate(row) {
        this.dialog.evaluateView = true;
        this.evaluateData.content = row.content
      },
      jumpNoticeInfo_1(data) {
        this.dialog.view = true;
        this.evaluateData.content = data
      },
      getOrderData() {
        getOrderData(this.lineStyleTime, getTenantId()).then(res => {
          this.lineStyleData.timeArray = res.data.timeArray;
          this.lineStyleData.newOrderList = res.data.newOrderList;
          this.lineStyleData.paidOrderList = res.data.paidOrderList;
          this.lineDataKey++
        })
      },
      getPayOrderData() {
        getPayOrderData(this.pieStyleTime, getTenantId()).then(res => {
          this.pieStyleData.courseOrders = res.data.orderNum.courseOrders;
          this.pieStyleData.classroomOrders = res.data.orderNum.classroomOrders;
          this.pieStyleData.memberOrders = res.data.orderNum.memberOrders;
          this.allPieDataCount = res.data.orderNum.courseOrders + res.data.orderNum.classroomOrders + res.data.orderNum.memberOrders;
          this.pieDataKey++
        })
      },
      getFinishTask() {
        getFinishTask(this.barStyleTime, getTenantId()).then(res => {
          this.barStyleData.timeArray = res.data.timeArray;
          this.barStyleData.finishTaskNum = res.data.finishTaskNum;
          this.barDataKey++
        })
      },
      getAnnouncementContent() {
        getFirstContent(getTenantId()).then(res => {
          this.announcementContent = res.data.content
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .homepage-container {
    width: 100%;
    padding: 15px 15px 50px 15px;

    dl {
      clear: left;
    }

    dt,
    dd {
      float: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .homepage-header {
      width: 100%;
      margin-bottom: 30px;

      .title {
        margin: 35px 0 20px 0;
        font-size: 19px;
        color: #55585e;
        font-weight: bold;
      }

      .header-list {
        width: 100%;
        height: 172px;
        border-radius: 5px;

        div {
          height: 132px;
          width: 100%;
          border-radius: 5px;

          .titleimg {
            border-radius: 50%;
            float: left;
            margin-top: 25px;
            text-align: center;
            background-color: rgba(11, 46, 85, 0.08);
            @media screen and (max-width: 1580px) {
              margin-left: 4.8%;
              width: 50px;
              line-height: 60px;
              height: 50px;
              .icon {
                width: 28px;
                height: 28px;
              }
            }
            @media screen and (min-width: 1581px) {
              margin-left: 6.8%;
              width: 70px;
              height: 70px;
              line-height: 95px;
              .icon {
                width: 38px;
                height: 38px;
              }
            }
          }

          .content {
            float: left;
            margin-top: 25px;
            @media screen and (max-width: 1580px) {
              margin-left: 10.8%;
              width: 70px;
              height: 50px;
              span {
                font-size: 20px;
              }
              .subtitle {
                margin-top: 0;
                color: #fff;
                margin-bottom: 5px;
              }
            }
            @media screen and (min-width: 1581px) {
              margin-left: 11.6%;
              width: 96px;
              span {
                font-size: 30px;
              }
              .subtitle {
                margin-top: 0;
                color: #fff;
                margin-bottom: 20px;
              }
            }
          }
        }

        .list-bottom {
          margin: 0;
          height: 39px;
          background-color: rgba(0, 19, 44, 0.2);
          line-height: 40px;
          padding: 0 8px;
        }
      }

      .header-list {
        @media screen and (max-width: 1580px) {
          height: 142px;
          div {
            height: 109px;
          }
          .list-bottom {
            height: 33px;
          }
        }
      }
    }

    .home-indent {
      width: 100%;
      height: 550px;

      .indent-left,
      .indent-right {
        width: 100%;
        height: 550px;
        background: #fff;
        position: relative;

        .line,
        .pie {
          padding: 15px 15px;
        }

        .el-switch {
          position: absolute;
          top: 22px;
          right: 12.5%;
        }

        .total {
          position: absolute;
          left: 50%;
          top: 40%;
          width: 150px;
          text-align: center;
          margin-left: -75px;
          font-size: 50px;
        }
      }
    }

    .home-notice {
      width: 100%;
      height: 450px;
      line-height: 24px;
      /*display: -webkit-box;*/
      /*-webkit-box-orient: vertical;*/
      /*-webkit-line-clamp: 10;*/
      /*overflow: hidden;*/
      background-color: #fff;
      margin-bottom: 15px;
      padding: 15px 5px 10px 15px;
      box-sizing: border-box;

      .home-notice-div {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 16;
      }

      dt {
        margin-bottom: 20px;
        padding: 4px;
        color: #fff;
        border-radius: 3px;
        font-size: 13px;
      }

      dd {
        width: 68%;
        line-height: 26px;
        margin-inline-start: 20px;
        font-size: 16px;
        margin-top: -3px;
      }

      .notice-header {
        margin-bottom: 26px;

        span:first-child {
          font-size: 18px;
        }

        span:last-child {
          float: right;
          margin-top: -5px;
          font-size: 16px;

          .el-button {
            color: #9fa0a0;
          }
        }
      }
    }

    .home-status {
      width: 100%;
      height: 229px;
      background-color: #fff;
      padding: 15px 15px 0 15px;
      box-sizing: border-box;

      .status-header {
        margin-bottom: 26px;

        span {
          font-size: 18px;
        }
      }

      dt {
        margin-bottom: 15px;
        font-size: 16px;
        color: #626669;
        line-height: 23px;

        .el-icon-warning:before {
          color: red;
          margin-right: 7px;
          font-size: 18px;
          height: 30px;
        }

        .el-icon-success:before {
          color: rgba(52, 248, 12, 0.966);
          margin-right: 7px;
          font-size: 18px;
        }
      }

      dd {
        float: right;
        margin-inline-start: 20px;
        font-size: 16px;
      }

      .danger {
        text-decoration: underline;
        color: #ff5e5e;
      }
    }

    .home-subject {
      width: 100%;
      height: 550px;
      background-color: #fff;
      margin-top: -0px;
      padding: 10px 15px 0 15px;

      .subject-header {
        width: 100%;
        display: block;
        height: 54px;

        .el-tabs {
          .el-tabs__item {
            font-size: 18px;
          }

          .el-tabs__active-bar {
            transition: none;
          }

          .el-tabs__item.is-active {
            border-bottom: 2px solid #409eff;
          }

          .el-tabs__item:nth-child(2) {
            padding: 0;
          }

          .el-tabs__item:last-child {
            margin-left: 15px;
            padding: 0;
          }

          .el-tabs__nav-wrap::after {
            height: 0;
          }
        }
      }
    }

    .home-task {
      width: 100%;
      overflow: hidden;

      .task-left,
      .task-right {
        background: #fff;
        height: 550px;
        padding: 15px 15px 0 15px;
        position: relative;

        .bar {
          padding: 0 0;
        }

        .el-switch {
          position: absolute;
          top: 22px;
          right: 15%;
        }

        .right-header {
          width: 100%;
          display: block;
          height: 54px;

          .el-tabs {
            .el-tabs__item {
              font-size: 18px;
            }

            .el-tabs__active-bar {
              transition: none;
            }

            .el-tabs__item.is-active {
              border-bottom: 2px solid #409eff;
            }

            .el-tabs__item:nth-child(2) {
              padding: 0;
            }

            .el-tabs__item:last-child {
              margin-left: 15px;
              padding: 0;
            }

            .el-tabs__nav-wrap::after {
              height: 0;
            }
          }
        }

        .el-table .cell {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          height: 28px;
          line-height: 28px;
        }
      }
    }
  }
</style>
